<template>
  <div class="mask" @click="$emit('hideMask')">
    <div class="content">
      <router-link class="block" to="/overtime/0">
        <span class="iconfont icon-jiaban"></span>
        加班
      </router-link>
      <router-link class="block" to="/overtime/1">
        <span class="iconfont icon-dujia"></span>
        休假
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-mask',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
}
.mask .content{
  display: flex;
  justify-content: space-around;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 30px 0;
  background-color: white;
}
.mask .content .block{
  color: #333333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mask .content .block span{
  font-size: 24px;
}
</style>
